<template>
  <el-card
    :body-style="{
      padding: '0 0 0 0',
      backgroundColor: '#fff',
      position: 'relative',
    }"
  >
    <p class="tabs-title">{{ (data.thirdTypeVos.find(item=>item.id==type)||{name:'全部游戏'}).name }}</p>
    <div class="list">
      <div class="item" v-for="item in data.pageSoftVos" :key="item.id">
        <AllGameDetailCard :data="item"/>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="data.total"
        :page-size="data.pageSize"
        v-model:currentPage="data.curPage"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
      <div class="flex layout">
        第<span>{{ data.curPage+'/'+Math.ceil(data.total/data.pageSize) }}</span>条到第
        <el-input
          size="mini"
          class="el-pagination__editor is-in-pagination"
          :min="1"
          :max="99"
          :model-value="innerValue"
          type="number"
          @update:model-value="handleInput"
          @change="handleChange"
        />
        页
      </div>
    </div>
  </el-card>
</template>
  
  <script setup>
import AllGameDetailCard from "./AllGameDetailCard.vue";
import { ref, computed, defineEmits  } from "vue";
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
  type: {
      type: Number,
      default: 0,
  }
});
const emit = defineEmits({
  'pageChange': null,
  'typeChange': null,
})
const activeName = ref("pop");

const handleClick = (tab, event) => {
  emit('typeChange',activeName.value)
};

const userInput = ref(null);
const handleInput = (val) => {
  userInput.value = +val;
};

// const currentPage = ref(1);
const handleCurrentChange = (pageNumber) => {
  emit('pageChange',pageNumber)
};

const handleChange = (pageNumber) => {
  console.log(pageNumber);
  userInput.value = undefined;
  emit('pageChange',pageNumber)
  // currentPage.value = +val;
};


const innerValue = computed(() => userInput.value);
</script>
  
  <style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
}
.pagination {
  padding-bottom: 20px;
  .layout {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #545759;
    line-height: 14px;
    margin-right: 20px;
  }
}
.list {
  padding: 20px 20px 0px 20px;
  display: flex;
  flex-wrap: wrap;
  .item {
    margin-bottom: 24px;
    &:not(:nth-child(3n)) {
      margin-right: 48px;
    }
  }
}
.tabs-title {
    padding-left: 20px;
    height: 50px;
    border-bottom: 1px solid #eee;
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #1d2127;
    line-height: 50px;
}

.el-tabs {
  ::v-deep(.el-tabs__nav-wrap) {
    padding-left: 200px;
  }

  ::v-deep(.el-tabs__item) {
    height: 32px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #93999e;
    line-height: 1;
  }

  ::v-deep(.is-active) {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #47b752;
    line-height: 1;
  }

  ::v-deep(.el-tabs__active-bar) {
    background-color: #47b752;
  }

  ::v-deep(.el-tabs__nav-scroll) {
    padding: 16px 20px 0 20px;
  }
}

::v-deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
  background-color: #47b752;
}

::v-deep(.el-pagination.is-background .el-pager li:not(.disabled):hover) {
  color: #47b752;
}
::v-deep(.el-input__inner:focus) {
  border-color: #47b752;
}
</style>